<template>
  <view class="block_con">
    <view class="card">
      <view
        class="product"
        v-for="item in classList"
        :key="item.id"
        @click="goDetails(item.id)"
      >
        <image :src="item.image_list.url" mode="scaleToFill" />
        <view class="productTitle">{{ item.product_name }}</view>
        <view class="price">
          <text class="nowprice">￥{{ item.actual_amount }}</text>
          <text class="orginprice">￥{{ item.origin_amount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getByCat } from "@/api/home.js";
export default {
  data() {
    return {
      id: "",
      classList: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getCatery();
  },
  methods: {
    getCatery() {
      getByCat({
        catId: this.id,
      }).then((res) => {
        this.classList = res.data;
      });
    },
    goDetails(id) {
      uni.navigateTo({
        url: "/pages/details/details?id=" + id,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.block_con {
  height: 100vh;
}
.card {
  padding: 22rpx;
  display: flex;
  background-color: #f4f4f4;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 28rpx;
  .product {
    border-radius: 1rpx;
    display: flex;
    flex-direction: column;
    padding: 18rpx;
    background-color: #ffffff;
    margin-bottom: 28rpx;
    image {
      width: 308rpx;
      height: 308rpx;
    }
    .productTitle {
      width: 308rpx;
      height: 104rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 26rpx;
      color: #1e1e1e;
      margin-top: 20rpx;
    }
    .price {
      display: flex;
      align-items: center;
      margin-top: 18rpx;
      .nowprice {
        font-size: 30rpx;
        font-weight: bold;
      }
      .orginprice {
        font-size: 22rpx;
        text-decoration: line-through;
        text-decoration-color: #fd8a34;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
